<include file="public@header" />
<style>html {background-color: #ffffff;}</style>

</head>
<body>
	<div class="layui-fluid">
		<form method="post" class="layui-form js-ajax-form" action="{:url('merchant.storetype/editPost')}" style="margin-top:20px ;">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-tab layui-tab-brief">
						<ul class="layui-tab-title">
							<li ><a href="{:url('merchant.storetype/index')}">列表</a></li>
							<li class="layui-this"><a >{:lang('EDIT')}</a></li>
						</ul>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label"><span class="form-required">*</span>层级</label>
						<div class="layui-input-block">
							<select class="layui-input" name="pid" id="pid" lay-filter="pid">
								<option value="0">一级类目</option>
								<volist name="list" id="v">
									<option value="{$v['id']}" <eq name="data['pid']" value="$v['id']">selected</eq> >{$v['name']}</option>
								</volist>
							</select>
						</div>
					</div>

					<div class="layui-card-body">
						<div class="layui-form-item">
							<label class="layui-form-label"><span class="form-required">*</span>名称</label>
							<div class="layui-input-block">
								<input type="text" class="layui-input" name="name" value="{$data.name}" required>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label"><span class="form-required">*</span>字体颜色</label>
							<div class="layui-input-block">
								<input class="layui-input js-color valid" name="font_color" id="color"  aria-invalid="false" style="display:inline-block;width:200px;" value="{$data['font_color']}">
								<input class="layui-input" id="colour_block" style="display:inline-block;;width:50px;background:{$data['font_color']};" disabled/>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label"><span class="form-required">*</span>图标</label>

							<div class="layui-input-block">
								<input type="hidden" name="thumb" id="thumbnail" value="{$data.thumb}">
								<a href="javascript:uploadOneImage('图片上传','#thumbnail');">
									<if condition="empty($data.thumb)">
										<img src="__TMPL__/public/assets/images/default-thumbnail.png" id="thumbnail-preview" style="cursor: pointer;max-width:150px;max-height:150px;"/>
									<else/>
										<img src="{:cmf_get_image_preview_url($data.thumb)}" id="thumbnail-preview" style="cursor: pointer;max-width:150px;max-height:150px;"/>
									</if>
								</a>
								<div class="layui-col-md12" style="margin-top: 10px">
									<input type="button" class="layui-btn layui-btn-sm layui-btn-normal"
										   onclick="$('#thumbnail-preview').attr('src','__TMPL__/public/assets/images/default-thumbnail.png');$('#thumbnail').val('');return false;"
										   value="取消图片">
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label"><span class="form-required">*</span>图标背景</label>

							<div class="layui-input-block">
								<input type="hidden" name="background" id="background" value="{$data.background}">
								<a href="javascript:uploadOneImage('图片上传','#background');">
									<if condition="empty($data.background)">
										<img src="__TMPL__/public/assets/images/default-thumbnail.png" id="background-preview" style="cursor: pointer;max-width:150px;max-height:150px;"/>
										<else/>
										<img src="{:cmf_get_image_preview_url($data.background)}" id="background-preview" style="cursor: pointer;max-width:150px;max-height:150px;"/>
									</if>
								</a>
								<div class="layui-col-md12" style="margin-top: 10px">
									<input type="button" class="layui-btn layui-btn-sm layui-btn-normal"
										   onclick="$('#background-preview').attr('src','__TMPL__/public/assets/images/default-thumbnail.png');$('#background').val('');return false;"
										   value="取消图片">
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="hidden" name="id" value="{$data.id}" />
								<button type="submit" class="layui-btn js-ajax-submit">{:lang('EDIT')}</button>
								<a class="layui-btn layui-btn-primary btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
	<include file="public@script"/>
	<script>
		function pid_change(){
			let pid=$('#pid').val();
			$('.pid_bd').hide();
			$('.pid_'+pid).show();
		}

		(function (){
			pid_change();
			layui.use(['layer', 'jquery', 'form'], function () {
				var layer = layui.layer,
						$ = layui.jquery,
						form = layui.form;

				form.on('select(pid)', function(data){
					pid_change();
				});

			});

		})()
	</script>
	<script>
		Wind.use('colorpicker',function(){
			$('.js-color').each(function () {
				var $this=$(this);
				$this.ColorPicker({
					livePreview:true,
					onChange: function(hsb, hex, rgb) {
						$("#colour_block").css('background','#'+hex);
						$this.val('#'+hex);
					},
					onBeforeShow: function () {
						$(this).ColorPickerSetColor(this.value);
					}
				});
			});

		});
	</script>
</body>
</html>